<template>
    <div class="point-list">
        <div class="div-point">
            <el-button @click="isShowPoint = true">添加点配置</el-button>
            <div v-show="curComponent.points !== []">
                <div @dragstart="handleDragStart" class="component-list">
                    <div v-for="(item, index) in curComponent.points" :key="index" class="list" draggable 
                    :data-index="0" @mousedown="getIndex(index)">
                        <span>{{ item.name }}</span>
                    </div>
                    <!-- <el-tag
                    v-for="(tag, index) in curComponent.points"
                    class="list" 
                    draggable
                    :key="index"
                    closable
                    @mousedown="getIndex(index)"
                    @close="removePoint(index)"
                >
                    {{ tag.name }}
                </el-tag> -->
                </div>
            </div>
        </div>
        <Modal v-model="isShowPoint">
            <el-tabs v-model="pointActiveName">
                <el-tab-pane v-for="item in pointData" :key="item.label" :label="item.label" :name="item.label">
                    <el-scrollbar class="point-container">
                        <div
                            class="point"
                            v-for="(point, index) in item.children"
                            :key="index"
                            @click="addPoint(point)"
                        >
                            <div>
                                {{ point.name }}
                            </div>
                        </div>
                    </el-scrollbar>
                </el-tab-pane>
            </el-tabs>
        </Modal>
    </div>
</template>

<script>
import Modal from '@/components/Modal'
// import pointData from '@/utils/point'
import { mapState } from 'vuex'

export default {
    name: 'PointList',
    components: { Modal },
    data() {
        return {
            isShowPoint: false,
            pointActiveName: '公共',
            pointData,
            pointsIndex: null,
        }
    },
    computed: mapState([
        'curComponent',
    ]),
    mounted() {
    },
    methods: {
        addPoint(value) {
            this.$store.commit('addPoint', value)
            this.isShowPoint = false
        },
        removePoint(index) {
            this.$store.commit('removePoint', index)
        },
        handleDragStart(e) {
            const pointInfo = this.curComponent.points[this.pointsIndex]
            e.dataTransfer.setData('index', e.target.dataset.index)
            e.dataTransfer.setData('component', 'v-text')
            // 点配置的名称
            e.dataTransfer.setData('propValue', pointInfo.name)
            // 当前组件的点配置索引
            e.dataTransfer.setData('pointsIndex', this.pointsIndex)
            // 点配置单位
            e.dataTransfer.setData('unitDisable', pointInfo.unitDisable)
        },
        getIndex(index) {
            // console.log(index)
            this.pointsIndex = index
        },
    },
}
</script>

<style lang="scss" scoped>
.point-list {
    .div-point {
        text-align: center;

        & > div {
            margin-top: 20px;
        }

        .el-tag {
            display: block;
            // width: 50%;
            margin: auto;
            margin-bottom: 10px;
        }
    }

    .el-scrollbar__view {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-left: 10px;

        .point > div {
            width: 100px;
            height: 60px;
            background: #f5f8fb;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 12px;
            margin-bottom: 10px;
            font-size: 12px;
            color: #333;
            border-radius: 3px;
            user-select: none;
            cursor: pointer;
        }
    }
}
.component-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;

    .list {
        width: 80%;
        margin-left: 10%;
        border: 1px solid #ddd;
        cursor: grab;
        margin-bottom: 10px;
        text-align: center;
        color: #333;
        padding: 2px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        // overflow: hidden;
        // white-space: normal;
        // text-overflow: ellipsis;
    }
}
</style>